<template>
  <div>
    <Jdd-Card padding="0" style="margin-bottom:16px;padding:6px 16px;">
      <Row>
        <Col :xs="24" :sm="24" :md="8" :lg="8" style="margin:6px 0px">
          <span style="font-weight:600;">标题标题：</span>
          <span style="margin-left:4px;">内容内容内容内容内容内容</span>
        </Col>
        <Col :xs="24" :sm="24" :md="8" :lg="8" style="margin:6px 0px">
          <span style="font-weight:600;">标题标题：</span>
          <span style="margin-left:4px;">内容内容内容内容内容内容1</span>
        </Col>
        <Col :xs="24" :sm="24" :md="8" :lg="8" style="margin:6px 0px">
          <span style="font-weight:600;">标题标题：</span>
          <span style="margin-left:4px;">内容内容内容内容内容内容</span>
        </Col>
      </Row>
      <!-- <div style="padding:12px 16px;flex:1;white-space:nowrap;min-width:33.3%;">
        <span style="color: #515A6E;">标题标题：</span>
        <span style="margin-left:4px;">内容内容内容内容内容内容</span>
      </div>-->
    </Jdd-Card>
    <Jdd-TablePage ref="dataTable" v-bind="baseTableData" @on-selection-change="selectItem">
      <Row>
        <Col :xs="24" :sm="24" :md="18" :lg="18">
          <Jdd-BtnDefault type="primary" @click="handBtnAdd">新增应用</Jdd-BtnDefault>
          <Jdd-BtnDelete
            :content="'批量删除吗'"
            :beforeClick="handBachOperate"
            @click="(bool,Proxy) => bool && btnDelete(Proxy)"
          >批量删除</Jdd-BtnDelete>
          <!-- <Jdd-BtnDefault type="warning" @click="handBachOperate">批量删除</Jdd-BtnDefault> -->
        </Col>
      </Row>
      <template slot-scope="props" slot="progress">
        <Progress :percent="props.row.appProcess" />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Jdd-Icon
          @click="btnDetailClick(row,index)"
          type="icon-details"
          size="18"
          title="详情信息"
          disabled
        />
        <Jdd-BtnUpdate icon :beforeClick="()=>beforeBtnUpdate(row)" disabled title="修改信息"></Jdd-BtnUpdate>
        <Jdd-BtnDelete icon @click="(bool,Proxy) => bool && btnDelete(Proxy,row.id)"></Jdd-BtnDelete>
        <Jdd-BtnUpdate
          :icon="row.status === 1?'icon-start':'icon-stop'"
          @click="(bool,Proxy) => bool && toActive(Proxy,row.id)"
          :title="row.status === 1?'开启':'关闭'"
        ></Jdd-BtnUpdate>
      </template>
    </Jdd-TablePage>
    <Jdd-FormModal
      v-model="modalShow"
      :title="modalFlag==='create'?'新增应用':'修改应用'"
      form="modalForm"
      @click="formModalClick"
      :beforeClick="formModalBeforeClick"
    >
      <Form ref="modalForm" :model="modalForm" :rules="ruleModalForm" :label-width="100">
        <FormItem label="应用名称：" prop="appName">
          <Jdd-Input
            type="text"
            v-model.trim="modalForm.appName"
            placeholder="后端验证输入sgm或dnp可看效果"
            :disabled="modalFlag==='detail'"
          />
        </FormItem>
        <FormItem label="应用类型：" prop="appType">
          <Jdd-Select
            v-model="modalForm.appType"
            :option="appTypeList"
            label-name="text"
            value-name="code"
            :disabled="modalFlag==='detail'"
          ></Jdd-Select>
        </FormItem>
        <FormItem label="应用描述：" prop="appDesc">
          <Jdd-Input
            type="textarea"
            v-model.trim="modalForm.appDesc"
            placeholder="127.0.0.1"
            :disabled="modalFlag==='detail'"
          />
        </FormItem>
      </Form>
      <template slot="footerBar" v-if="modalFlag!=='detail'">
        <Jdd-BtnReset form="modalForm"></Jdd-BtnReset>
      </template>
    </Jdd-FormModal>
  </div>
</template>
<script>
import baseTable from './baseTable.js'
export default baseTable
</script>
